{include file="common/header-top" /}


<style>
    .thirdStep-cell-li .van-cell__title{
        max-width: 26%;
    }

    .van-cell-li{
        padding-top: 0px;
        padding-bottom: 0px;
        padding-right: 0px;
        min-height: 44px;
    }
    .van-cell-li .van-cell__left-icon{
        display: inline-block;
        padding-top: 10px;
    }
    .van-cell-li .van-cell__title span{
        display: inline-block;
        padding-top: 10px;
    }
    .van-cell-li .van-cell__value .van-field{
        background-color: #2aa24512;
        padding: 8px 10px;
        margin-top: 1px;
    }

    .van-uploader-img-zm{
        width: 100%;
        background:url("/__FRONT__/images/icon/id-card-zm.png") no-repeat;
        background-size: 100% 100%;
        opacity:0.4;
        filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
    }
    .van-uploader-img-bm{
        width: 100%;
        background:url("/__FRONT__/images/icon/id-card-bm.png") no-repeat;
        background-size: 100% 100%;
        opacity:0.4;
        filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
    }
    .van-uploader__wrapper{
        height: 200px;
    }
    .van-uploader__upload{
        background-color: #fff0;
    }
    .van-uploader__upload-icon{
        font-size: 100px;
        color: #000000;
    }

    .van-cell--required::before {
        padding-top: 15px;
    }

</style>


<div id='app' v-cloak>

    <van-nav-bar title="个人认证" left-arrow @click-left="goBack" left-text="返回" ></van-nav-bar>



    <!-- 个人认证信息 -->
    <van-row style="padding-bottom: 50px;">
        <van-cell title="个人认证信息" icon="/__FRONT__/images/icon/user-setting-personal.png" ></van-cell>
        <!--身份信息-->
        <van-col span="24">
            <van-cell title="姓名"
                      class="thirdStep-cell-li van-cell-li"
                      icon="/__FRONT__/images/icon/user-setting-name.png"
                      :required="true"
            >
                <van-field
                        v-model="userExtend.true_name"
                        input-align="center"
                        slot="default"
                        border="false"
                        placeholder="请输入您的真实姓名"
                >
                </van-field>
            </van-cell>

            <van-cell
                    title="性别"
                    icon="/__FRONT__/images/icon/publish-job-sex.png"
                    is-link
                    :value="showGender"
                    @click="clickShowSelectGender"
            ></van-cell>

            <van-cell title="年龄"
                      class="thirdStep-cell-li van-cell-li"
                      icon="/__FRONT__/images/icon/age-icon.png"
                      :required="true"
            >
                <van-field
                        v-model="userExtend.true_age"
                        input-align="center"
                        slot="default"
                        border="false"
                        placeholder="请输入您的年龄"
                        type="number"
                >
                </van-field>
            </van-cell>


            <!-- <van-cell title="身份证"
                      class="thirdStep-cell-li van-cell-li"
                      icon="/__FRONT__/images/icon/user-setting-idcard.png"
                      :required="true"
            >
                <van-field
                        v-model="userExtend.id_card"
                        input-align="center"
                        slot="default"
                        border="false"
                        placeholder="请输入您的身份证件号"
                >
                </van-field>
            </van-cell> -->


            <!--证件照-->
           <!--  <van-cell
                    title="证件照"
                    icon="/__FRONT__/images/icon/user-setting-zj-photo.png"
                    is-link
                    @click="clickShowPhoto"
                    :required="true"
                    :value="showIsUpload"
            > </van-cell> -->
            <!--证件照-->




            <van-cell
                    title="所在地区"
                    icon="/__FRONT__/images/icon/publish-job-area.png"
                    is-link
                    :value="showArea"
                    @click="clickShowSelectArea"
                    :required="true"
            ></van-cell>






        </van-col>

        <!--教育信息-->
        <van-col span="24">
            <van-divider :style="{borderColor: '#32a14a', padding: '0px', margin: '5px'}"></van-divider>
            <van-cell title="教育信息" icon="/__FRONT__/images/icon/user-setting-edu.png" ></van-cell>


            <van-cell
                    title="职业"
                    icon="/__FRONT__/images/icon/user-setting-profession.png"
                    is-link
                    :value="showProfession"
                    @click="clickShowSelectProfession"
                    :required="true"
            ></van-cell>

            <van-cell
                    title="学历"
                    icon="/__FRONT__/images/icon/user-setting-xueli.png"
                    is-link
                    :value="showEducation"
                    @click="clickShowSelectEdu"
                    :required="true"
            ></van-cell>

            <van-cell
                    title="学校"
                    icon="/__FRONT__/images/icon/user-setting-school-g.png"
                    is-link
                    :value="showSchool"
                    @click="clickShowSearchSchool"
            ></van-cell>

            <van-cell
                    title="专业"
                    icon="/__FRONT__/images/icon/user-setting-major.png"
                    is-link
                    :value="showMajor"
                    @click="clickShowSearchMajor"
            ></van-cell>

        </van-col>


        <!--其他-->
        <van-col span="24">
            <van-divider :style="{borderColor: '#32a14a', padding: '0px', margin: '5px'}"></van-divider>
            <van-cell title="联系方式" icon="/__FRONT__/images/icon/user-setting-other.png" > </van-cell>

            <van-cell title="手机号码"
                      class="thirdStep-cell-li van-cell-li"
                      icon="/__FRONT__/images/icon/user-setting-mobile.png"
                      :required="true"
            >
                <van-field
                        v-model="userExtend.mobile"
                        input-align="center"
                        slot="default"
                        border="false"
                        placeholder="请输入您的手机号码"
                        @blur="checkPhoneNum"
                        :error-message="phone.error"
                        type="number"
                >
                </van-field>
            </van-cell>

            <!--短信验证码-->
            <van-cell title="验证码"
                      class="thirdStep-cell-li van-cell-li"
                      icon="/__FRONT__/images/icon/phone-smscode.png"
                      :required="true"
            >
                <van-field
                        v-model="phone.smsCode"
                        center
                        clearable
                        placeholder="请输入短信验证码"
                >
                    <van-button
                            slot="button"
                            size="small"
                            type="primary"
                            @click="sendSmsCode"
                            v-if="phone.isSendSmsCode"
                    >{{phone.sendText}}</van-button>
                    <van-count-down
                            :time="phone.againTime"
                            slot="button"
                            v-if="!phone.isSendSmsCode"
                            format="重发(ss)"
                            @finish="showSendSmsCode"
                            class="van-button van-button--small"
                            style="color:#ffffff;height: 25px; background-color: #b5b7b7;"
                    ></van-count-down>
                </van-field>
            </van-cell>
            <!--短信验证码-->



            <van-cell title="微信号"
                      class="thirdStep-cell-li van-cell-li"
                      icon="/__FRONT__/images/icon/user-setting-wechat.png"
                      :required="true"
            >
                <van-field
                        v-model="userExtend.wechat_id_card"
                        input-align="center"
                        slot="default"
                        border="false"
                        placeholder="请输入您的微信号"
                >
                </van-field>
            </van-cell>


            <van-cell title="支付宝账号"
                      class="thirdStep-cell-li van-cell-li"
                      icon="/__FRONT__/images/icon/alipay-icon.png"
                      :required="true"
            >
                <van-field
                        v-model="userExtend.alipay_num"
                        input-align="center"
                        slot="default"
                        border="false"
                        placeholder="请输入您的支付宝帐号"
                >
                </van-field>
            </van-cell>



            <van-cell title="邮箱"
                      class="thirdStep-cell-li van-cell-li"
                      icon="/__FRONT__/images/icon/user-setting-email.png"
            >
                <van-field
                        v-model="userInfo.email"
                        input-align="center"
                        slot="default"
                        border="false"
                        placeholder="请输入您的邮箱"
                >
                </van-field>
            </van-cell>



        </van-col>



    </van-row>
    <!-- 个人认证信息 -->





    <van-goods-action>
        <van-goods-action-button
            type="danger"
            text="提交"
            style="border-radius: 0px; margin-left: 0px;margin-right: 0px;"
            @click="submitApprove"
        ></van-goods-action-button>
    </van-goods-action>





    <!--性别选择器-->
    <van-popup
            v-model="showSelectGender"
            position="bottom"
    >
        <van-picker
                show-toolbar
                :columns="genderList"
                @cancel="showSelectGender = false"
                @confirm="confirmSelectGender"
        ></van-picker>

    </van-popup>
    <!--性别选择器-->

    <!--区域方式选择器-->
    <van-popup
            v-model="showSelectArea"
            position="bottom"
    >
        <van-area
                :area-list="selectArea"
                @cancel="showSelectArea = false"
                @confirm="confirmSelectArea"
        ></van-area>
    </van-popup>
    <!--区域选择器-->



    <!--职业选择器-->
    <van-popup
            v-model="showSelectProfession"
            position="bottom"
    >
        <van-picker
                show-toolbar
                :columns="professionList"
                @cancel="showSelectProfession = false"
                @confirm="confirmSelectProfession"
        ></van-picker>

    </van-popup>
    <!--职业选择器-->



    <!--学历选择器-->
    <van-popup
            v-model="showSelectEdu"
            position="bottom"
    >
        <van-picker
                show-toolbar
                :columns="educationList"
                @cancel="showSelectEdu = false"
                @confirm="confirmSelectEdu"
        ></van-picker>

    </van-popup>
    <!--学历选择器-->


    <!--学校搜索器-->
    <van-popup
        v-model="showSearchSchool"
        position="bottom"
        :style="{ height:'50%'}"
    >
        <van-search
                v-model="searchSchoolText"
                placeholder="请输入搜索学校关键词"
                show-action
                @search="searchSchool"
                @cancel="showSearchSchool = false"
        >
            <div slot="action" @click="searchSchool">搜索</div>
        </van-search>
        <van-picker
                show-toolbar
                :columns="searchSchoolList"
                @cancel="showSearchSchool = false"
                @confirm="confirmSearchSchool"
        ></van-picker>
    </van-popup>
    <!--学校搜索器-->

    <!--专业搜索器-->
    <van-popup
            v-model="showSearchMajor"
            position="bottom"
            :style="{ height:'50%'}"
    >
        <van-search
                v-model="searchMajorText"
                placeholder="请输入搜索专业关键词"
                show-action
                @search="searchMajor"
                @cancel="showSearchMajor = false"
        >
            <div slot="action" @click="searchMajor">搜索</div>
        </van-search>
        <van-picker
                show-toolbar
                :columns="searchMajorList"
                @cancel="showSearchMajor = false"
                @confirm="confirmSearchMajor"
        ></van-picker>
    </van-popup>
    <!--专业搜索器-->


    <!--证件照-->
   <!--  <van-popup
            v-model="showUploadPhoto"
            position="bottom"
            :style="{ height:'100%'}"
    >
        <van-nav-bar title="上传证件照" left-arrow @click-left="confirmUploadPhoto" left-text="返回" ></van-nav-bar>
        <van-row style="padding: 15px;">
            <van-uploader
                :after-read="afterReadUpload"
                preview-size="100%"
                preview-image
                class="van-uploader-img-zm"
                :max-count="1"
                v-model="idCardZm"
                name="id_card_zm"
            >
            </van-uploader>


            <van-divider :style="{borderColor: '#32a14a', padding: '0px', margin: '10px'}"></van-divider>


            <van-uploader
                    :after-read="afterReadUpload"
                    preview-size="100%"
                    class="van-uploader-img-bm"
                    :max-count="1"
                    v-model="idCardBm"
                    name="id_card_bm"
            >
            </van-uploader>

        </van-row>

        <van-row>
            <van-col span="24">
                <van-button type="primary" size="large" @click="confirmUploadPhoto">保存</van-button>
            </van-col>
        </van-row>

    </van-popup> -->
    <!--证件照-->



</div>








<script src="/__FRONT__/plugs/vant/json/selectArea.js"></script>

<script>

    Vue.use(vant.Lazyload);

    var vm = new Vue({
        el: '#app',
        data() {
            return {
                currentRate: 0,
                active:3,
                userCenterIcon: {
                    normal: '/__FRONT__/images/icon/usercenter-n.png',
                    active: '/__FRONT__/images/icon/usercenter-a.png'
                },
                erShouIcon: {
                    normal: '/__FRONT__/images/icon/ershou-n.png',
                    active: '/__FRONT__/images/icon/ershou-a.png'
                },


                userInfo:{},
                userExtend:{},

                //显示选择性别pop
                showSelectGender: false,
                //性别列表
                genderList:[
                    
                    {
                        index: 1,
                        text: '男士'
                    },
                    {
                        index: 2,
                        text: '女士'
                    }
                ],

                //地区选择
                showSelectArea: false,
                selectArea: {},


                //职业选择
                showSelectProfession: false,
                professionList:[],
                //学历选择
                showSelectEdu: false,
                educationList: [],

                //学校选择
                showSearchSchool: false,
                searchSchoolText: '',
                searchSchoolList: [],

                //专业选择
                showSearchMajor: false,
                searchMajorText: '',
                searchMajorList: [],

                //证件照
                /*showUploadPhoto:false,
                idCardZm: [],
                idCardBm: [],*/

                phone:{
                    error: '',
                    smsCode: '',
                    sendText: '发送验证码',
                    isSendSmsCode: true,
                    againTime: 120000,
                }


            };
        },

        created(){

            //获取系统中开放的地区
            axiosRequest.get('/api/common/openArea').then(function (response) {
                if (response.code == 200) {
                    vm.$data.selectArea = response.data;
                }
            });

            //认证个人需要的信息
            axiosRequest.get('/api/user/approvePerson').then(function (response) {
                if (response.code == 200) {
                    vm.$data.professionList = response.data.professionList;
                    vm.$data.educationList = response.data.educationList;
                } else {
                    vant.Toast(response.msg);
                }
            });


            //个人信息
            axiosRequest.get('/api/user/userInfo', {params:{userExtend:1}}).then(function (response) {
                if (response.code == 200) {
                    vm.$data.userInfo = response.data.userInfo;
                    vm.$data.userExtend = response.data.userInfo.extend;
                    //处理重新认证地区
                    if (response.data.userInfo.areainfo.trim().length > 3) {
                        var areaArr = response.data.userInfo.areainfo.trim().split(' ');
                        if (areaArr.length >= 3) {
                            vm.$data.userInfo.provinceid = areaArr[0];
                            vm.$data.userInfo.cityid = areaArr[1];
                            vm.$data.userInfo.areaid = areaArr[2];
                        } else {
                            vm.$data.userInfo.areainfo = '';
                        }
                    } else {
                        vm.$data.userInfo.areainfo = '';
                    }
                } else {
                    vant.Toast(response.msg);
                }
            });


        },

        computed:{
            showGender(){
                return (this.userExtend.true_sex == 0) ? '保密' : this.userExtend.showGender;
            },
            showArea(){
                return this.userInfo.cityid ? this.userInfo.areainfo : '请选择地区';
            },
            showProfession(){
                return (this.userExtend.profession == 0) ? '' : this.userExtend.showProfession;
            },
            showEducation(){
                return this.userExtend.education_class ? this.userExtend.showEducation : '';
            },
            showSchool(){
                return this.userExtend.education_school ? this.userExtend.showSchool : '';
            },
            showMajor(){
                return this.userExtend.education_major ? this.userExtend.showMajor : '';
            },
            /*showIsUpload(){
                if (this.userExtend.id_card_bm_img && this.userExtend.id_card_zm_img) {
                    return '已上传身份证件照';
                }
                return '请上传身份证件';
            }*/

        },

        methods:{

            //返回上一页
            goBack(){
                history.back();
            },

            //检测手机号码
            checkPhoneNum(){
                var reg = /^1(1|3|4|5|6|7|8|9)\d{1}[-]?\d{4}[-]?\d{4}$/;
                if(!reg.test(this.userExtend.mobile)){
                    this.phone.error = '请输入正确的电话号码!';
                } else {
                    this.phone.error = '';
                }
            },
            //发送短信验证码
            sendSmsCode(){
                if (!this.phone.isSendSmsCode) {
                    return false;
                }
                var postData = {
                    phone: this.userExtend.mobile
                };
                axiosRequest.post('/api/common/smsCode', postData).then(function (response) {
                    if (response.code == 200) {
                        vant.Toast('发送成功！请及时查收短信！');
                        vm.$data.phone.isSendSmsCode = false;
                    } else {
                        if (response.code == 100006) {
                            vant.Toast(response.msg);
                        } else {
                            vant.Toast('发送短信验证码失败,请稍后再试！');
                        }
                    }
                });

            },
            //显示可以再次发送短信
            showSendSmsCode(){
                this.phone.sendText = '重发验证码';
                this.phone.isSendSmsCode = true;
            },


            submitApprove(){
                var postData = {
                    true_name: this.userExtend.true_name,
                    mobile: this.userExtend.mobile,
                    true_sex: this.userExtend.true_sex,
                    true_age: this.userExtend.true_age,
                    /*id_card: this.userExtend.id_card,*/
                    profession: this.userExtend.profession,
                    /*id_card_zm_img: this.userExtend.id_card_zm_img,
                    id_card_bm_img: this.userExtend.id_card_bm_img,*/
                    wechat_id_card: this.userExtend.wechat_id_card,
                    alipay_num: this.userExtend.alipay_num,
                    education_class: this.userExtend.education_class,
                    education_school: this.userExtend.education_school,
                    education_major: this.userExtend.education_major,
                    email: this.userInfo.email,
                    provinceid: this.userInfo.provinceid,
                    cityid: this.userInfo.cityid,
                    areaid: this.userInfo.areaid,
                    areainfo: this.userInfo.areainfo,
                    smsCode: this.phone.smsCode
                };


                var checkData = [
                    {
                        field: 'true_name',
                        errorMsg: '请填写真实姓名！',
                    },
                    {
                        field: 'mobile',
                        errorMsg: '请填写联系方式！',
                    },
                   /* {
                        field: 'id_card',
                        errorMsg: '请填写身份证件号!',
                    },*/
                    {
                        field: 'profession',
                        errorMsg: '请选择职业!',
                    },
                    /*{
                        field: 'id_card_zm_img',
                        errorMsg: '请上传身份证正面!',
                    },
                    {
                        field: 'id_card_bm_img',
                        errorMsg: '请上传身份证背面!',
                    },*/
                    {
                        field: 'areaid',
                        errorMsg: '请选择所属地区!',
                    },
                    {
                        field: 'education_class',
                        errorMsg: '请选择学历!',
                    },
                    {
                        field: 'smsCode',
                        errorMsg: '请填写验证码!',
                    }
                ];
                //检测是否填写相应的数据
                for(var item of checkData) {
                    if (!postData[item.field]) {
                        vant.Toast(item.errorMsg);
                        return false;
                    }
                }
                axiosRequest.post('/api/user/approvePerson', postData).then(function (response) {
                    if (response.code == 200) {
                        vant.Toast({
                            message: '提交认证成功,请等待审核!',
                            onClose(){
                                window.location.href = '/index/Usercenter/userSetting';
                            }
                        });
                    } else {
                        vant.Toast('提交认证失败，请稍后再试！');
                    }
                });

            },





            //选择男女
            clickShowSelectGender(){
                this.showSelectGender = true;
            },
            confirmSelectGender(item){
                this.userExtend.true_sex = item.index;
                this.userExtend.showGender = item.text;
                this.showSelectGender = false;
            },

            //选择所属地区
            clickShowSelectArea(){
                this.showSelectArea = true;
            },
            confirmSelectArea(item){
                this.userInfo.areainfo = '';
                item.forEach(function(one, index){
                    if (index == 0) {
                        vm.$data.userInfo.provinceid = one.name;
                    }
                    if (index == 1) {
                        vm.$data.userInfo.cityid = one.name;
                    }
                    if (index == 2) {
                        vm.$data.userInfo.areaid = one.name;
                    }
                    vm.$data.userInfo.areainfo += ' ' + one.name;
                });
                this.showSelectArea = false;
            },


            //选择职业
            clickShowSelectProfession(){
                this.showSelectProfession = true;
            },
            confirmSelectProfession(item){
                this.userExtend.profession = item.index;
                this.userExtend.showProfession = item.text;
                this.showSelectProfession = false;
            },

            //选择学历
            clickShowSelectEdu(){
                this.showSelectEdu = true;
            },
            confirmSelectEdu(item){
                this.userExtend.education_class = item.index;
                this.userExtend.showEducation = item.text;
                this.showSelectEdu = false;
            },

            //选择学校
            clickShowSearchSchool(){
                this.showSearchSchool = true;
            },
            confirmSearchSchool(item){
                this.userExtend.education_school = item.index;
                this.userExtend.showSchool = item.text;
                this.showSearchSchool = false;
            },
            //search  学校列表
            searchSchool(){
                var postData = {
                    'search': this.searchSchoolText,
                    'pageSize': 10
                };
                axiosRequest.post('/api/common/searchSchool', postData).then(function (response) {
                    if (response.code == 200) {
                        if (response.data.length) {
                            vm.$data.searchSchoolList = response.data;
                        } else {
                            vant.Toast('未查询到结果!');
                        }
                    } else {
                        vant.Toast('未查询到结果!');
                    }
                });
            },


            //选择专业
            clickShowSearchMajor(){
                this.showSearchMajor = true;
            },
            confirmSearchMajor(item){
                this.userExtend.education_major = item.index;
                this.userExtend.showMajor = item.text;
                this.showSearchMajor = false;
            },
            //search  专业列表
            searchMajor(){
                var postData = {
                    'search': this.searchMajorText,
                    'pageSize': 10
                };
                axiosRequest.post('/api/common/searchMajor', postData).then(function (response) {
                    if (response.code == 200) {
                        if (response.data.length) {
                            vm.$data.searchMajorList = response.data;
                        } else {
                            vant.Toast('未查询到结果!');
                        }
                    } else {
                        vant.Toast('未查询到结果!');
                    }
                });
            },

            //上传证件照
            clickShowPhoto(){
                this.showUploadPhoto = true;
            },
            confirmUploadPhoto(){
                this.showUploadPhoto = false;
            },
            afterReadUpload(file, name){
                //上传图片
                var postData = {
                    img: file.content,
                    savePath: 'idcardimg/' + this.userInfo.id + '/',
                    extend: name.name
                };
                axiosRequest.post('/api/common/uploadImg', postData).then(function (response) {
                    if (response.code == 200) {
                        if (response.data.img) {
                            if (response.data.extend == 'id_card_zm') {
                                vm.$data.idCardZm = [
                                    {'url' : response.data.img}
                                ];
                                vm.$data.userExtend.id_card_zm_img = response.data.img;
                            }
                            if (response.data.extend == 'id_card_bm') {
                                vm.$data.idCardBm = [
                                    {'url' : response.data.img}
                                ];
                                vm.$data.userExtend.id_card_bm_img = response.data.img;
                            }
                        } else {
                            vant.Toast('上传失败!');
                        }
                    } else {
                        vant.Toast('上传失败!');
                    }
                });

                return true;
            }


        }
    });




</script>







{include file="common/foot-bottom" /}
